<template>
	<div>




		<div class="header">

			<van-nav-bar style="  background: linear-gradient(90deg, #FF6D00,#FFB500 , #FF6D00);height: 5rem;line-height: 5rem;">

				<span class="title" slot="title">填写资料</span>


				<span style="font-size: 1.5625rem ; color: white; font-weight: 500;" slot="right">
					<van-button type="primary" color="#FFAE00" @click="back">&nbsp;返&nbsp;&nbsp;&nbsp;回&nbsp;</van-button>
				</span>
			</van-nav-bar>

		</div>


		<!-- display: flex; align-items: center; -->
		<div class="content" style=" 	width:100%; background:url(./images/background.png) no-repeat; background-size:100% 100%;">

	

			<div class="cspan" style=" margin: 0 auto; margin-top: 1.5rem; width: 50%; ">

			
<!--  常规组件输入框
				<div class="demo-input-suffix" >
					<span style="font-size: 1rem;">属性方式：</span>
					<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1">
					</el-input>
					<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2">
					</el-input>
				</div>
				

				<div class="demo-input-suffix">
					slot 方式：
					<el-input placeholder="请选择日期" v-model="input3">
						<i slot="suffix" class="el-input__icon el-icon-date"></i>
					</el-input>
					<el-input placeholder="请输入内容" v-model="input4">
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div> -->



				<ul>



					<li class="item">
						<div class="lebel">
							龛位编号：
						</div>

						<div>
							{{ledList|ledName}}
						</div>

					</li>



					<li class="item">
						<div class="lebel">
							供佛时长：
						</div>

						<div>
							<ul style="  padding-right: 0.8rem;   border:#ffae00 solid 0.5px; text-align: left;background-color: #f5deb3;border-radius: 5px;padding-bottom: 0.8rem; ">

								<li class="cli" v-for="price,key in led_price">
									<div @click="selectTime(price,key)" :class="{selected:cprice.key==key}" class="selectTime">
										{{price.title}}
									</div>
								</li>

							</ul>
						</div>


					</li>


					<li class="item">
						<div class="lebel">
							逝者姓名：
						</div>

						<div>
							<input type="text" @focus="openOsk" @blur="closeOsk" v-model="departedName" placeholder="输入逝者姓名" />
						</div>
					</li>
					
					<li class="item">
						<div class="lebel">
							圣名：
						</div>
					
						<div>
							<input type="text" @focus="openOsk" @blur="closeOsk" v-model="userName" placeholder="输入圣名" />
						</div>
					
					</li>
					
					
					<li class="item">
						<div class="lebel">
							逝者年龄：
						</div>
					
						<div>
							<input type="text" @focus="openOsk" @blur="closeOsk" v-model="departedName" placeholder="输入逝者姓名" />
						</div>
					</li>
					
					<li class="item">
						<div class="lebel">
							安息时间：
						</div>
					
						<div>
							<input type="text" @focus="openOsk" @blur="closeOsk" v-model="departedName" placeholder="输入逝者姓名" />
						</div>
					</li>


			

					<li class="item">
						<div class="lebel">
							加属性名：
						</div>

						<div>
							<input type="text" @focus="openOsk" @blur="closeOsk" v-model="userName" placeholder="输入圣名" />
						</div>

					</li>


					<li class="item">
						<div class="lebel">
							手机号：
						</div>

						<div>
							<input type="text" @focus="openOsk" @blur="closeOsk" v-model="phoneNumber" placeholder="输入圣者手机号" />
						</div>

					</li>
					
					
					<li class="item">
						<div class="lebel">
							追思语：
						</div>
					
						<div>
					
							<select id="qifu" v-model="qifu">
								<option v-for="op in options" :value="op.content">{{op.content}}</option>
							</select>
						</div>
					
					</li>








				</ul>

			</div>





			<div style="margin: 0 auto; position: relative; bottom: -8rem">

				<div style="font-size: 1.3rem;color: #424242">
					供奉金额：{{total_fee}} 元
				</div>
				<van-button @click="submit()" color="#C8431A" size="large" style="  width: 15rem;">下一步</van-button>
			</div>




		</div>






	<!-- 弹出 -->
	<van-dialog v-model="editDeathdayShow" title="" :show-cancel-button="false" :show-confirm-button="false">
		<div style="margin-top: 1rem;">
			<van-datetime-picker @confirm="dateConfirm(2)" @cancel="editDeathdayShow = false" v-model="currentDate2" type="date"
			 :min-date="minDate" :formatter="formatter" title="安息时间" />
		</div>
	</van-dialog>

	</div>






	</div>

</template>

<script>
	export default {


		data() {
			return {

				minDate: new Date(1900, 0, 1),
				maxDate: new Date(2050, 1, 1),
				currentDate2: new Date(),
				editDeathdayShow: false,
				deathday: null,


				focus_flag: false,
				canOpen: true,
				keyboard: false,
				cprice: {},
				total_fee: 0,
				ledList: [{
					code: "A1"
				}, {
					code: "A2"
				}],
				userName: '',
				phoneNumber: '',
				qifu: '',
				departedName: '',

				errormessage: '',

				led_price: [{
					"title": "一天",
					"create_time": 1545960786279,
					"tid": null,
					"day": 1,
					"price": 0.01
				}, {
					"title": "半年",
					"create_time": 1545960818376,
					"tid": null,
					"day": 180,
					"price": 180
				}, {
					"title": "一年",
					"create_time": 1545960830201,
					"tid": null,
					"day": 365,
					"price": 365
				}],
				ledList: [{}, {}],

				message: 'Hello Vue!',
				options: [{
					"content": "text1"
				}, {
					"content": "text2"
				}],



			}
		},
		methods: {

			dateConfirm() {},

			formatter() {},

			back() {
				//this.$router.go(-1);
				this.$router.push("gongfo");
			},


			/* async dokeyboard(p){
				if(p==1){
					
				}else if(p==2)
			}, */

			focus() {

				/* 	if(!this.focus_flag){
						this.openOsk();
					}else{
					this.focus_flag=true;
					setTimeout(()=>{
						
						this.openOsk();
						
					},1000);
					
					} */

				/* 	
				this.focus_flag=true;
				this.openOsk();
			
				setTimeout(()=>{
					this.focus_flag=false;
					 },10); */




			},

			blur() {
				//看看现在的聚焦状态，如果是聚焦状态，就不要触犯关闭了
				/* 	setTimeout(()=>{
					if(!this.focus_flag){
						this.closeOsk();
						 this.focus_flag=false;
					}
					 },2); */




			},


			async openOsk() {

				await this.axios.get('http://localhost:8088/openOsk')
					.then((res) => {
						this.keyboard = true;
						console.log("打开键盘！！！")
					})
					.catch((err) => {
						console.log("失败了");
						console.log(err)
					});


			},
			async closeOsk() {
				await this.axios.get('http://localhost:8088/closeOsk')
					.then((res) => {
						console.log("关闭键盘！！！")
					})
					.catch((err) => {
						console.log("失败了");
						console.log(err)
					});

			},




			/* 		async	openOsk() {

								await 	 this.axios.get('http://localhost:8088/openTabTip')
								 		.then((res) => {
								 			this.keyboard = true;
								 			console.log("打开键盘！！！")
								 		})
								 		.catch((err) => {
								 			console.log("失败了");
								 			console.log(err)
								 		});
												
							
						},
					 async	 closeOsk() {
							
							
							
							let flag=false;

							await this.axios.get('http://localhost:8088/closeTabTip')
								.then((res) => {
									this.keyboard = false;
									
									flag=true;
									console.log("关闭键盘！！！")
								})
								.catch((err) => {
									console.log("失败了");
									console.log(err)
								});
								
								return  flag;
								
								
						}, */


			clickGetValue() {

			},

			submit() {


				/* let total_fee = v[3];
				this.total_fee = total_fee;

				console.log("---------------------------------------->", this.total_fee);
				let ledList = this.$route.query.ledList;

				this.ledList = ledList;

				console.log("this.ledList===============", this.ledList); */

				let day = this.$route.query.day;
				//验证数据

				if (this.departedName == '') {
					//this.errormessage = "姓名不能为空！";
					this.$toast.fail({
						message: '逝者姓名不能为空！'
					});

					return;
				}

				if (this.userName == '') {
					//this.errormessage = "姓名不能为空！";
					this.$toast.fail({
						message: '圣名不能为空！'
					});

					return;
				}

				if (this.phoneNumber == '') {
					//this.errormessage = "手机号不能为空！";
					this.$toast.fail({
						message: '手机号不能为空！'
					});
					return;
				}

				if (!/^1[3456789]\d{9}$/.test(this.phoneNumber)) {
					//this.errormessage = "手机号码格式不正确！";
					this.$toast.fail({
						message: '手机号码格式不正确！'
					});
					return;
				}

				/* 	else {
					this.errormessage = "";
				}
 */

				if (this.total_fee == 0 || this.total_fee == "0") {
					this.$toast.fail({
						message: '请选择供佛时长！'
					});
					return;
				}





				this.$router.push({
					path: '/GongfoStep1',
					query: {
						total_fee: this.total_fee,
						ledList: this.ledList,
						day: day,
						priceTitle: this.cprice.title,
						userName: this.userName,
						phoneNumber: this.phoneNumber,
						qifutext: this.qifu,
						departedName: this.departedName
					}
				});





			},

			/* 
			 
			 
			 juti
			 
			 
			 */


			selectTime(price, key) {


				this.cprice = price;
				this.cprice.key = key;
				this.total_fee = this.ledList.length * price.price;


			},
			getPrice() {


				axios.post("https://mianmianshi.com/cms/temple/client/getPrice", {
						where: {
							id: localStorage.tid
						}
					})
					.then((res) => {

						this.led_price = JSON.parse(res.data.led_price);

					})
					.catch(function(error) {
						window.console.log(error);
						alert("数据获取失败!");
					});

			}




		},
		filters: {

			//[{"title":"一天","create_time":1545960786279,"tid":null,"day":1,"price":0.01},{"title":"一个月","create_time":1545960801124,"tid":null,"day":30,"price":60},{"title":"半年","create_time":1545960818376,"tid":null,"day":180,"price":180},{"title":"一年","create_time":1545960830201,"tid":null,"day":365,"price":365}]
			//过滤数据用作显示
			ledName(value) {
				let str = "";
				for (let i = 0; i < value.length; i++) {
					if (i == value.length - 1) {
						str = str + value[i].code;
					} else {
						str = str + value[i].code + ","
					}
				}
				if (str.length > 20) {
					str = str.substring(0, 20) + "....";
				}
				return str;
			}

		},

		created() {

			this.ledList = this.$route.query.ledList;

			/*  */

			/* 获取祈福语*/
			axios.post('https://mianmianshi.com/cms/temple/client/getQifuText', {
					where: {
						'tid': localStorage.tid
					}
				})
				.then((response) => {
					console.log(response);
					this.options = response.data;

				})
				.catch(function(error) {
					console.log(error);
				});



			this.getPrice();


		},
		mounted() {




		}

	}
</script>

<style scoped>
	.item {

		margin: 0.5rem;
		display: flex;
		align-items: center;
		/* border: solid #002451; */
	}

	#st0 {
		height: 3.125rem;
		width: 12rem;

		/* 	position: absolute;
		bottom: 2rem;
		left: 47%; */
		margin-top: 1rem;

		text-align: center;





	}

	.pc {
		font-size: 1rem;
	}

	input {
		outline-style: none;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 13px 14px;
		width: 25rem;
		font-size: 1rem;
		;
		font-weight: 700;
		background: wheat;
		/* font-family: "Microsoft soft"; */
	}


	select {
		outline-style: none;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 13px 14px;
		width: 25rem;
		font-size: 1.2rem;
		font-weight: 700;
		background: wheat;



		/* font-family: "Microsoft soft"; */
	}


	/* option {
	
		font-size: 1rem;
	} */

	/*
	 
	消除滚动条，牛逼 
	 */
	.select::-webkit-scrollbar {
		display: none
	}



	input:focus {
		border-color: #66afe9;
		outline: 0;
		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
	}

	.cspan {

		font-size: 1.2rem;
		color: brown;
		font-weight: 600;
	}


	.cli {
		margin-top: 0.8rem;
		display: inline-block;
		text-align: center;
		margin-left: 0.8rem;

	}

	.selectTime {
		list-style: none;
		color: white;
		width: 5.23rem;
		height: 2rem;
		background: #FFAE00;
		line-height: 2rem;
		border: solid 0.5px #002451;
		font-size: 1.2rem;
	}

	.lebel {
		width: 20%;
		text-align: justify;
		text-justify: distribute-all-lines;
		text-align-last: justify;
	}


	.selected {
		background-color: #34D54A;
	}
</style>
